<template>
  <div class="index box clmcenter radial-gradient-demo">
    <img
      src="../assets/img/back.png"
      class="back"
      @click="$router.replace('/main')"
    />
    <div class="container box">
      <p class="title">2022 H5项目汇总</p>
      <div class="totalbox">
        <div class="block" @click="toNext('dt')">
          <div class="overlay">
            <p>答题类</p>
          </div>
          <img src="../assets/img/2.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('tpcj')">
          <div class="overlay">
            <p>投票抽奖类</p>
          </div>
          <img src="../assets/img/3.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('photos')">
          <div class="overlay">
            <p>照片互动类</p>
          </div>
          <img src="../assets/img/4.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('changgui')">
          <div class="overlay">
            <p>常规类</p>
          </div>
          <img src="../assets/img/1.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('yyqd')">
          <div class="overlay">
            <p>预约签到类</p>
          </div>
          <img src="../assets/img/5.jpg" alt="Image" />
        </div>
        <div class="block" @click="toWxapp">
          <div class="overlay">
            <p>小程序</p>
          </div>
          <img src="../assets/img/6.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('datas')">
          <div class="overlay">
            <p>数据类</p>
          </div>
          <img src="../assets/img/7.jpg" alt="Image" />
        </div>
        <div class="block" @click="toNext('qj')">
          <div class="overlay">
            <p>全景类</p>
          </div>
          <img src="../assets/img/8.jpg" alt="Image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    toNext(val) {
      this.$router.replace({ path: "/info2022", query: { from: val } });
    },
    toWxapp() {
      this.$router.replace("/wxapp");
    },
  },
};
</script>
<style lang="less" scoped>
.index {
  .container {
    z-index: 2;
    overflow-y: scroll;
  }
  .title {
    font-size: 2.5rem;
    color: #000;
    padding-top: 3rem;
  }
  .totalbox {
    width: 80%;
    height: auto;
    margin: 3rem auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .block {
      position: relative;
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 0.5rem;
      margin: 2rem;
      // -webkit-transform: perspective(600px) rotateY(-30deg);
      // transform: perspective(600px) rotateY(-30deg);
      // -webkit-transition: -webkit-transform 0.3s;
      // transition: -webkit-transform 0.3s;
      // transition: transform 0.3s;
      // transition: transform 0.3s, -webkit-transform 0.3s;
      -webkit-transform: perspective(600px);
      transform: perspective(600px);
      overflow: hidden;
      box-shadow: 4px 2px 0 2px #242007;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .overlay {
        position: fixed;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.4);
        // opacity: 0;
        // -webkit-transition: opacity 0.3s ease;
        // transition: opacity 0.3s ease;
        p {
          font-size: 1.8rem;
          color: #ffffff;
        }
      }
    }
    // .block:hover {
    //   box-shadow: -1px 2px 5px 6px #efefe5;
    // }
    // .block.hover,
    // .block:hover {
    //   -webkit-transform: rotateY(0);
    //   transform: rotateY(0);
    //   cursor: pointer;
    //   .overlay {
    //     opacity: 1;
    //   }
    // }
  }
}
@media only screen and (min-height: 1270px) {
}
@media only screen and (min-height: 1350px) {
}
@media only screen and (min-height: 1400px) {
  .index {
    .container {
      margin-bottom: 3rem;
    }
  }
}
</style>
<style>
.radial-gradient-demo {
  background-color: #e6ddec;
  background-image: radial-gradient(
      closest-side,
      rgb(242, 210, 250),
      rgba(141, 177, 83, 0)
    ),
    radial-gradient(closest-side, rgb(238, 232, 181), rgba(190, 230, 98, 0)),
    radial-gradient(closest-side, rgb(236, 185, 229), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, #88FEE4, rgba(170, 142, 245, 0));
  background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
  background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  background-repeat: no-repeat;
  animation: 15s moiveAnimation infinite;
}
@keyframes moiveAnimation {
  0%,
  100% {
    background-size: 50vw 50vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
    background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  }
  25% {
    background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;
    background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;
  }
  50% {
    background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;
    background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;
  }
  75% {
    background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;
    background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;
  }
}
.bg2 {
  position: absolute;
  top: 0;
  left: 0;
}
.g-polygon {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.g-polygon-1 {
  /* 定位代码，容器高宽随意 */
  background: #ffee55;
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.g-polygon-2 {
  /* 定位代码，容器高宽随意 */
  background: #e950d1;
  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-3 {
  /* 定位代码，容器高宽随意 */
  background: rgba(87, 80, 233);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
.bg2::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10rem);
  z-index: 1;
}
</style>
